<!-- 部门领导概览页面 -->
<template>
  <section id="main-wrapper" class="theme-default">
        <aside class="sidebar sidebar-left" >
            <div class="sidebarDiv">
                <i class="iconfont icon-trendingup"></i>
                <span class="departmentSpanSimple">Campus<span class="uniqueLogo">Care</span></span>
            </div>
            <div class="departmentName">
                <div class="avatar">
                    <img src="https://avatars3.githubusercontent.com/u/8786120?v=3&s=40">
                     <span>学生处<br/>abvdsfg</span>
                </div>  
            </div>
            <nav>
                <ul class="nav nav-pills nav-stacked">
                    <li>
                        <a href="#applicationAnalysis" class="nav-header collapsed" data-toggle="collapse">
                            <i class="iconfont icon-yingyong"></i>
                        应用分析  <span class="pull-right glyphicon  glyphicon-chevron-toggle"></span>
                        </a>
                        <ul id="applicationAnalysis" class="nav nav-list collapse secondmenu in">
                          <li><a @click="loadview()" v-link="{ name: 'applicationOverView', params: { deptId:deptId }}"></i>应用概览</a></li>
                          <li><a @click="loadview()" v-link="{ name: 'applicationList', params: { deptId:deptId }}"></i>应用列表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#processAnalysis" class="nav-header collapsed" data-toggle="collapse">
                        <i class="iconfont icon-formatlistbulleted"></i>
                        流程分析 <span class="pull-right glyphicon glyphicon-chevron-toggle"></span></a>
                        <ul id="processAnalysis" class="nav nav-list collapse secondmenu" >
                          <li><a @click="loadview()" v-link="{ name: 'processOverview', params: { deptId:deptId }}"></i>流程概览</a></li>
                          <li><a @click="loadview()" v-link="{ name: 'processList', params: { deptId:deptId }}"></i>流程列表</a></li>
                        </ul>
                      </li>
                </ul>
            </nav>
        </aside>
        <section class="main-content-wrapper row">
            <router-view></router-view>
        </section>
    </section>
    
</template>
<style src="../../assets/css/main.css"></style>

<script>
import { changeKind,changeMsg } from '../../vuex/action'
export default {
  vuex: {
    getters: {
      kind(state) {
        return this.$route.params.deptId
      },
      msg(state){
        return state.msg
      }
    },
    actions: {
      changeKind: changeKind,
      changeMsg:changeMsg
    }
  },
  methods: {
    loadview: function() {
      var id = this.$route.params.deptId
      this.changeKind(id);
      this.changeMsg("1");
    }
  }
}
</script>
<style scoped>
.theme-default .sidebar-left {
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/  
    background:#2ACDCF; /* 一些不支持背景渐变的浏览器 */  
    background:-moz-linear-gradient(left, #769ADC, #2ACDCF);  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#769ADC), to(#2ACDCF));  
    background:-o-linear-gradient(left, #769ADC, #2ACDCF);
    color: #fff;
}
div.sidebarDiv {
    height: 70px;
}
div.sidebarDiv i{
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: 24px;
    font-size: 24px;
}
span.departmentSpanSimple {
    display: block;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
}
span.uniqueLogo {
    color: #33E8E9;
}
div.departmentName {
    height: 60px;
    margin-left: 24px;
}
footer{
    text-align: center;
    margin-top: 48px;
    color: #bbbbbb;
}
.departmentName img,
.departmentName span{
    float: left;
}
.departmentName span{
    margin-left: 8px;
    color: #fff;
}
/*div.departmentName span {
    display: block;
    height: 70px;
}*/
.nav-stacked{
    color: #fff;
}
.nav-list>li>a{
   padding:10px 42px;
}
.nav-stacked .nav-header:focus{
    background-color: transparent;
}
.sidebar .nav .v-link-active{
  border-left: 4px solid #93D36E;
  background-color:#68B8F7;
}
.sidebar .nav a{
    border-left: 4px solid transparent;
    font-weight: normal;
}
.sidebar .nav .nav-list a{
    padding-left: 60px;
}
.nav .nav-header{
    padding-left: 24px;
    font-size: 14px;
    
}
.nav-header.collapsed > span.glyphicon-chevron-toggle:before {
    content: "\e114";
}

.nav-header > span.glyphicon-chevron-toggle:before {
    content: "\e113";
}
</style>
